<template>
    <div class="hamburger-container" @click="toggleClick">
        <svg-icon class="hamburger" id="guide-hamburger" :icon="icon"></svg-icon>
    </div>
</template>

<script>
export default {
    name: 'Event1Hamburger',

    data() {
        return {
            
        };
    },
        methods: {
        toggleClick(){
            this.$store.commit("app/triggerSidebarOpened")
        }
    },
    mounted() {
        
    },

    computed:{
        icon(){
            return this.$store.getters.sidebarOpened?"hamburger-opened":"hamburger-closed"
        }
    },

};
</script>

<style lang="scss" scoped>
.hamburger-container {
  padding: 0 16px;
  .hamburger {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
  }
}
</style>